import React, { Component } from 'react';
import {
	StyleSheet, Text, View, TextInput, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
const scale = GLOBAL.SCALE;
export class HalfList extends Component {
	constructor(props) {
		super(props);
	}
	render () {
		let { title, value, text, writeCallBack, name, editable, keyboardType } = this.props;
		let defValue = value ? value.toString() : '';
		return (
			<View style={{ width: '50%' }}>
				<Text style={styles.listText}>{title}</Text>
				<View style={styles.box}>
					<TextInput
						ref="accountInput"
						keyboardType={keyboardType}
						style={styles.listInput}
						keyboardType={keyboardType}
						underlineColorAndroid='transparent'
						placeholderTextColor="#BFBFBF"
						defaultValue={defValue}
						editable={editable}
						onChangeText={(valueStr) => {
							writeCallBack({
								name,
								value: valueStr
							})
						}}
					/>
					<Text>{text}</Text>
				</View>
			</View>
		)
	}
}
const styles = StyleSheet.create({
	listInput: {
		width: 100 * scale,
		height: 40 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
		textAlign: 'center',
		fontSize: 12 * scale,
		color: style.color.darkGray,
	},
	listText: {
		fontSize: 12 * scale,
		color: style.color.darkGray,
		height: 17 * scale,
		lineHeight: 17 * scale,
		marginTop: 17 * scale
	},
	box: { flexDirection: 'row', alignItems: 'center' }
})